<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苹果手机库存监控</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🍎 苹果手机库存监控</h1>
            <p>实时监控Apple Store门店iPhone库存状态</p>
        </header>

        <div class="controls">
            <div class="input-group">
                <label for="productModel">产品型号:</label>
                <input type="text" id="productModel" placeholder="例如: MG064CH/A" value="MG064CH/A">
                <small>请输入完整的产品型号</small>
            </div>

            <div class="input-group">
                <label for="storeId">门店ID:</label>
                <select id="storeId">
                    <option value="R479">R479 - 默认门店</option>
                    <option value="R388">R388 - 西单大悦城</option>
                    <option value="R448">R448 - 王府井</option>
                    <option value="R645">R645 - 朝阳大悦城</option>
                    <option value="R463">R463 - 三里屯</option>
                    <option value="R532">R532 - 华贸购物中心</option>
                </select>
            </div>

            <div class="input-group">
                <label for="refreshInterval">刷新间隔 (秒):</label>
                <select id="refreshInterval">
                    <option value="10">10秒</option>
                    <option value="30" selected>30秒</option>
                    <option value="60">1分钟</option>
                    <option value="300">5分钟</option>
                    <option value="600">10分钟</option>
                </select>
            </div>

            <div class="button-group">
                <button id="startMonitor" class="btn btn-primary">开始监控</button>
                <button id="stopMonitor" class="btn btn-secondary" disabled>停止监控</button>
                <button id="checkOnce" class="btn btn-info">立即查询</button>
            </div>
        </div>

        <div class="status-bar">
            <div class="status-item">
                <span class="label">监控状态:</span>
                <span id="monitorStatus" class="status stopped">已停止</span>
            </div>
            <div class="status-item">
                <span class="label">最后更新:</span>
                <span id="lastUpdate">未更新</span>
            </div>
            <div class="status-item">
                <span class="label">下次刷新:</span>
                <span id="nextUpdate">-</span>
            </div>
        </div>

        <div class="results">
            <h2>库存查询结果</h2>
            <div id="loadingIndicator" class="loading hidden">
                <div class="spinner"></div>
                <span>正在查询库存信息...</span>
            </div>
            <div id="errorMessage" class="error hidden"></div>
            <div id="stockResults" class="stock-results"></div>
        </div>

        <div class="logs">
            <h3>查询日志</h3>
            <div class="log-controls">
                <button id="clearLogs" class="btn btn-small">清空日志</button>
                <label>
                    <input type="checkbox" id="autoScroll" checked>
                    自动滚动
                </label>
            </div>
            <div id="logContainer" class="log-container"></div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>